Trilium supports Mermaid, which adds support for various diagrams such
as flowchart, sequence diagram, class diagram, state diagram, pie charts,
etc., all using a text description of the chart instead of manually drawing
the diagram.
Starting with v0.103.0, Mermaid diagrams no longer start with a sample
flowchart, but instead a pane at the bottom will show all the supported
diagrams with sample code for each:
Simply click on any of the samples to apply it.
The pane will disappear as soon as something is typed in the code editor
or a sample is selected. To make it appear again, simply remove the content
of the note.
Layouts
Depending on the chart being edited and user preference, there are two
layouts supported by the Mermaid note type:
Horizontal, where the source code (editable part) is on the left side
of the screen and the preview is to the right.
Vertical, where the source code is at the bottom of the screen and the
preview is at the top.
It's possible to switch between the two layouts at any time by pressing
the
icon in the Floating buttons area.
Interaction
The source code of the diagram (in Mermaid format) is displayed on the
left or bottom side of the note (depending on the layout).
Changing the diagram code will refresh automatically the diagram.
The preview of the diagram is displayed at the right or top side of the
note (depending on the layout):
There are dedicated buttons at the bottom-right of the preview to control
the zoom in, zoom out or re-center the diagram:
The preview can be moved around by holding the left mouse button and dragging.
Zooming can also be done by using the scroll wheel.
The zoom and position on the preview will remain fixed as the diagram
changes, to be able to work more easily with large diagrams.
The size of the source/preview panes can be adjusted by hovering over
the border between them and dragging it with the mouse.
The source/preview can be laid out left-right or bottom-top via the Move editing pane to the left / bottom option.
Press Lock editing to automatically mark the note as read-only.
In this mode, the code pane is hidden and the diagram is displayed full-size.
Similarly, press Unlock editing to mark a read-only note as editable.
Press the Copy image reference to the clipboard to be able to insert
the image representation of the diagram into a text note. See Image references for more information.
Press the Export diagram as SVG to download a scalable/vector rendering
of the diagram. Can be used to present the diagram without degrading when
zooming.
Press the Export diagram as PNG to download a normal image (at
1x scale, raster) of the diagram. Can be used to send the diagram in more
traditional channels such as e-mail.
Errors in the diagram
If there is an error in the source code, the error will be displayed in
an information pane.
During the state of an error, the diagram will no longer be rendered and
the previously working diagram will remain in the preview section.
icon in the Floating buttons area.